<!-- 充值记录 -->
<template>
	<view>
		<view class="topUp-box" v-if='hasNet'>
			<u-sticky>
				<view class="balance-box">
					<text>账户余额：{{feeBalance}}元</text>
					<text>短信余额：{{communitySmsBalance}}条</text>
					<u-icon name="calendar" size="46" color="rgb(0, 110, 255)" @click="showCalendar()"></u-icon>
				</view>
			</u-sticky>

			<u-calendar v-model="calendarStus" mode="range" @change="calendarChange()" ref='calendarCom'>
				<view slot='restBtn'>
					<u-button size='mini' type="primary" @click="restTime()">重置</u-button>
				</view>
			</u-calendar>

			<!--  账单 -->
			<view class="bill-box" v-if='hasData'>
				<view class="month-box" v-for="(item,index) in recordDetail" :key='index'>
					<view class="month-details">
						<view>
							<view>{{item.goodsDesc}}</view>
							<view>{{item.dealTypeName}}</view>
						</view>
						<view>
							<view> <span>{{iconCheck(item.dealType)}}</span> {{item.amount}} </view>
							<view>{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-else style="text-align: center;">暂无记录</view>
		</view>
		
		<view v-else>
			<netError v-if="hasLoad"></netError>
		</view>
	</view>
</template>

<script>
	import {
		queryToUpRecord,
		queryMailBalance,
		queryFeeBalance
	} from '@/api/query.js'
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				calendarStus: false,
				page: 1,
				records: 0,
				startTime: '',
				endTime: '',
				recordDetail: [],//充值记录
				communitySmsBalance:0,//短信余额
				feeBalance:0,//账户余额
				hasNet: false, //是否有网
				hasData: false, //是否有内容
				hasLoad:false
			}
		},
		onLoad() {
			this.page = 1
			this.records = 0
			this.startTime = ''
			this.endTime = ''
			this.recordDetail = []
			this.queryRecord(1)
			this.queryMailBalance()
			this.queryFeeBalance()
		},
		onReachBottom() {
			if (this.page <= this.records) {
				this.queryRecord(this.page)
			}
		},
		computed:{
			...mapState('user',['userCommunity'])
		},
		methods: {
			showCalendar() {
				this.calendarStus = true
			},
			calendarChange(e) {
				this.startTime = e.startDate
				this.endTime = e.endDate
				this.recordDetail = []
				this.page = 1
				this.records = 0
				this.queryRecord(1)
			},
			//短信余额
			queryMailBalance(){
				queryMailBalance({communityId:this.userCommunity.communityId}).then(res=>{
					this.communitySmsBalance=res.communitySmsBalance
				})
			},
			//账户余额
			queryFeeBalance(){
				queryFeeBalance({communityId:this.userCommunity.communityId}).then(res=>{
					this.feeBalance=res.data.balance
				})
			},
			//充值记录
			async queryRecord(page) {
				let data = {
					page: page,
					row: 10,
					startTime: this.startTime,
					endTime: this.endTime
				}
				queryToUpRecord(data).then(res=>{
					this.records = res.records
					this.page++
					this.recordDetail.push(...res.data)
					this.hasNet = true
					this.hasLoad=true
					if (this.recordDetail.length > 0) {
						this.hasData = true
					} else {
						this.hasData = false
					}
				}).catch(err=>{
					this.hasNet=false
					this.hasLoad=true
				})
			},
			iconCheck(type) {
				return type == "1" ? "+" : "-"
			},
			restTime() {
				this.page = 1
				this.records = 0
				this.startTime = ''
				this.endTime = ''
				this.recordDetail = []
				this.queryRecord(1)
				this.$refs.calendarCom.close()
				this.$refs.calendarCom.init()
			}
		}
	}
</script>

<style lang="scss">
	.topUp-box {
		color: #444444;

		.balance-box {
			padding: 32rpx;
			font-weight: bold;
			font-size: $uni-font-size-lg;
			background-color: #F5F6FA;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.month-flex {
			padding: 32rpx;
			display: flex;
			align-items: center;
			border-bottom: 4rpx solid #F0F0F0;
			background-color: #FFFFFF;

			text {
				font-size: $uni-font-size-lg;
				font-weight: bold;
				margin-right: 14rpx;
			}
		}

		.bill-box {
			.month-box {
				background-color: #FFFFFF;
				padding: 0 32rpx;
				padding-bottom: 14rpx;
				// margin-bottom: 16rpx;

				.month {
					padding: 32rpx 0rpx;
					display: flex;
					align-items: center;
					border-bottom: 4rpx solid #F0F0F0;

					text {
						font-size: $uni-font-size-lg;
						font-weight: bold;
						margin-right: 14rpx;
					}
				}

				.month-details {
					padding: 30rpx 0rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 4rpx solid #F0F0F0;

					view:nth-child(1) {
						text-align: right;

						view:nth-child(1) {
							font-size: $uni-font-size-lg;
							color: #444444;
							margin-bottom: 8rpx;
						}

						view:nth-child(2) {
							font-size: $uni-font-size-sm;
							color: #AFAFAF;
						}
					}

					view:nth-child(2) {
						text-align: left;

						view:nth-child(1) {
							font-size: $uni-font-size-lg;
							color: #444444;
							margin-bottom: 8rpx;
							font-weight: bold;
						}

						view:nth-child(2) {
							font-size: $uni-font-size-sm;
							color: #AFAFAF;
						}
					}
				}
			}
		}
	}
</style>
